<template>
    <div class="absolute left-50% top-33px">
        <div class="nav-wrap-top-icon"></div>
        <div class="bg-#576171 w-100px absolute right--6px border-rd-6px text-center p-4px text-14px font-700" >
            <div class="ml-5px mr-5px mt-10px pb-5px border-b-2px border-b-solid border-b-#677386" @click.stop="showDescriptionPop = true">Game Rules</div>
            <div class="mt-5px mb-10px">Betting Record</div>
        </div>
    </div>
    <GameDescriptionPop @closed="showDescriptionPop = false" :show="showDescriptionPop" />
</template>

<script setup lang="ts">
import GameDescriptionPop from "./gameDescriptionPop.vue"

const showDescriptionPop = ref(false)
</script>

<style lang="less" scoped>
.nav-wrap-top-icon{
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #576171;
    margin-left: 148px;
}
</style>